<template>
    <div style="width:90%;">
        <el-form :model="planForm" :rules="planRules" ref="planForm" label-width="150px">
            <el-button @click="goback()" size="mini" type="primary" style="margin-left:1000px">返回</el-button>

            <el-form-item label>
                <h3 style="margin-bottom: 16px;">选择名片类型</h3>
                <el-select
                    v-model="planForm.cardType"
                    style="width:50%;"
                    :disabled="updateFlag || disabledFlag"
                >
                    <el-option label="商品分享名片" value="1"></el-option>
                    <el-option label="活动分享名片" value="2"></el-option>
                    <el-option label="店铺分享名片" value="3"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label prop="isSpecial" v-if="planForm.cardType != 1"  >
                <el-radio v-model="planForm.isSpecial" label="0" :disabled="disabledFlag">普通名片</el-radio>
                <el-radio v-model="planForm.isSpecial" label="1" :disabled="disabledFlag">25周年风格名片</el-radio>
                <el-radio v-model="planForm.isSpecial" label="2" :disabled="disabledFlag">元春活动名片</el-radio>
            </el-form-item>
            <el-divider>
                <i class></i>
            </el-divider>
            <el-form-item label="名片名称:" prop="cardName">
                <el-input
                    type="text"
                    v-model="planForm.cardName"
                    :disabled="disabledFlag"
                    placeholder="请输入"
                    style="width:50%;"
                    maxlength="15"
                    show-word-limit
                ></el-input>
            </el-form-item>
            <el-form-item label="名片背景图片:" prop="cardPic">
                <single-image-upload
                    v-if="!disabledFlag"
                    v-model="planForm.cardPic"
                    :imageWidth="120"
                    :imageHeight="120"
                    :width="'120px'"
                    :height="'120px'"
                ></single-image-upload>
                <div class="demo-image__preview" v-if="disabledFlag">
                    <el-image style="width: 120px; height: 120px" :src="planForm.cardPic"></el-image>
                </div>
            </el-form-item>
            <el-row :span="24">
                <el-col :span="6">
                    <el-form-item label="匹配背景底色：" prop="background">
                        <div class="block">
                            <span class="demonstration">{{ planForm.background }}</span>
                            <el-color-picker
                                v-model="planForm.background"
                                :disabled="disabledFlag"
                                size="mini"
                                :predefine="planForm.predefineColors"
                            ></el-color-picker>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="匹配字体颜色：" prop="fontColor">
                        <div class="block">
                            <span class="demonstration">{{ planForm.fontColor }}</span>
                            <el-color-picker
                                v-model="planForm.fontColor"
                                :disabled="disabledFlag"
                                size="mini"
                                :predefine="planForm.predefineColors"
                            ></el-color-picker>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="有效期：" prop="runTimeRange" v-if="planForm.cardType !== '3'">
                <el-date-picker
                    v-model="planForm.runTimeRange"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    :clearable="false"
                    :disabled="disabledFlag"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
                <el-input
                    v-model="planForm.sort"
                    type="number"
                    style="text-align-last:right; width:50%;"
                    :min="1"
                    :disabled="disabledFlag"
                ></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-input
                    type="textarea"
                    v-model="planForm.remark"
                    :disabled="disabledFlag"
                    placeholder="请输入"
                    maxlength="50"
                    show-word-limit
                    :autosize="{ minRows: 2 }"
                    style="width:50%;"
                ></el-input>
            </el-form-item>
            <el-form-item label="发布状态：">
                <el-radio-group v-model="planForm.publishStatus" :disabled="disabledFlag">
                    <el-radio-button label="0">不发布</el-radio-button>
                    <el-radio-button label="1">发布</el-radio-button>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    @click="submitForm('planForm')"
                    v-show="!this.disabledFlag"
                >保 存</el-button>
                <el-button @click="resetForm('planForm')" v-show="!this.disabledFlag">取 消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {
  saveGoodsActivityWithGoods,
  updateStoreCardInfo,
  queryGoodsStoreList
} from "@/api/userCardEdit";
import imageUpload from "@/page/common/Image-upload";
import singleImageUpload from '@/page/common/single-image-upload'
import { queryGradelevelRule } from "@/api/membergrade";

const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : "0" + month;
  var date = curDate.getDate();
  date = date > 9 ? date : "0" + date;
  return year + "-" + month + "-" + date;
};

export default {
  data() {
    return {
      keepAlive:true,
      loading: true,
      disabledFlag: false,
      updateFlag: false,
      planForm: {
        uuid: "",
        cardType: "1",
        cardPic: "",
        remark: "",
        cardName: "",
        background: "#FCFCFC",
        fontColor: "#070707",
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsl(181, 100%, 37%)',
          '#c7158577'
        ],
        runTimeRange: [curDateStr(), curDateStr()],
        beginTime: "",
        endTime: "",
        isSpecial: "0",
        sort: "1",
        publishStatus:"0",
        status: ""
      },
      planRules: {
        cardName: [
          { required: true, message: "请输入名片名称", trigger: "blur" }
        ],
        sort: [{ required: true, message: "排序", trigger: "blur" }],
        runTimeRange: [
          { required: true, message: "请选择买赠活动有效期", trigger: "blur" }
        ],
        cardPic: [{ required: true, message: "请上传名片背景图片", trigger: "blur" }]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "未来3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "未来一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "未来一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ],
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果当天可选，就不用减8.64e7
        }
      }
    };
  },
  components: {
    imageUpload,singleImageUpload
  },
  mounted() {
    var v = this.$route.params.edit;
    this.disabledFlag = this.$route.params.falg;
    this.updateFlag = this.$route.params.updateFlag;
    if (v) {
      // 修改，回显值
      this.planForm.uuid = v.uuid;
      this.planForm.cardType = String(v.cardType);
      this.planForm.cardName = v.cardName;
      this.planForm.background = v.background;
      this.planForm.fontColor = v.fontColor;
      if(this.planForm.cardType != 3){
      this.planForm.runTimeRange = [
        v.beginTime.toString(),
        v.endTime.toString()
      ];
      }
      this.planForm.cardPic =v.cardPic;
      this.planForm.beginTime = v.beginTime;
      this.planForm.endTime = v.endTime;
      this.planForm.isSpecial = v.isSpecial==null?"0":String(v.isSpecial);
      this.planForm.sort = v.sort;
      this.planForm.remark = v.remark;
      this.planForm.publishStatus = String(v.publishStatus);
      this.planForm.status = String(v.status);
    } else {
      // 新增，默认值
      this.planForm.uuid = "";
      this.planForm.status = "1";
    }
  },
  watch: {},
  methods: {
    goback() {
      this.$router.go("-1");
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.planForm.cardPic = this.planForm.cardPic;
          if(this.planForm.runTimeRange != null && this.planForm.runTimeRange.length == 2){
            this.planForm.beginTime = this.planForm.runTimeRange[0];
            this.planForm.endTime = this.planForm.runTimeRange[1];
          }
          this.keepAlive = false;
          if (this.$route.params.edit) {
            updateStoreCardInfo(this.planForm).then(res => {
              if (res.code == "1") {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: "success"
                });
                this.$router.push("userCard");
              } else {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: "error"
                });
              }
            });
          } else {
            saveGoodsActivityWithGoods(this.planForm).then(res => {
              if (res.code == "1") {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: "success"
                });
                this.$router.push("userCard");
              } else {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: "error"
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("userCard");
    }
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = this.keepAlive; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  },
};
</script>
<style lang="less" scoped>
.el-col-20 {
    border: 1px solid #ebeef5;
    margin-left: 150px;
    width: 60%;
}
.el-input {
    width: 60%;
}
.search-form-inline {
    border: 1px solid #ebeef5;
    line-height: 30px;
    padding: 12px;
    margin-bottom: 5px;
}
</style>
